<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>RetroArch Web Player</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap core CSS -->
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css">
      <!-- Font Awesome -->
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
      <!-- Material Design Bootstrap -->
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css">
      <link rel="stylesheet" type="text/css" href="libretro.css">
      <link rel="shortcut icon" href="media/retroarch.ico" />
   </head>
   <body>
      <!--Navbar-->
      <nav class="navbar navbar-dark bg-primary">
         <div class="container">
            <!--navbar content-->
            <div class="navbar-toggleable-xs">
               <!--Links-->
               <ul class="nav navbar-nav">
                  <div class="dropdown">
                     <li class="nav-item dropdown">
                        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Core Selection</button>
                        <div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut" id="core-selector"></div>
                        <button class="btn btn-primary disabled" id="btnRun" disabled>
                        <span class="fa fa-spinner fa-spin" id="icnRun"></span> Run
                        </button>
                        <button class="btn btn-primary disabled" id="btnAdd" disabled>
                        <span class="fa fa-plus" id="icnAdd"></span> Add Content
                        </button>
                        <input style="display: none" type="file" id="btnRom" name="upload" multiple />
                        <button class="btn btn-primary tooltip-enable" id="btnClean" title="Cleanup storage">
                        <span class="fa fa-trash-o" id="icnClean"></span> <span class="sr-only">Cleanup</span>
                        </button>
                        <button class="btn btn-primary disabled tooltip-enable" id="btnMenu" title="Menu toggle" disabled>
                        <span class="fa fa-bars" id="icnMenu"></span> <span class="sr-only">Menu</span>
                        </button>
                        <button class="btn btn-primary disabled tooltip-enable" id="btnFullscreen" title="Fullscreen" disabled>
                        <span class="fa fa-desktop" id="icnFullscreen"></span> <span class="sr-only">Fullscreen</span>
                        </button>
                        <button type="button" class="btn btn-primary tooltip-enable" data-toggle="modal" data-target="#helpModal">Help</button>
                     </li>
                  </div>
               </ul>
               <div class="toggleMenu">
                  <button class="btn btn-primary" id="btnHideMenu" title="Toggle Menu">
                  <span class="fa fa-chevron-up" id="icnHideMenu"></span> <span class="sr-only">Hide Top Navigation</span>
                  </button>
               </div>
            </div>
            <!-- Basics steps modal for Web Libretro -->
            <div class="modal fade" id="helpModal" role="dialog"  style="color:black;">
               <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h1 class="modal-title">Basics</h1>
                     </div>
                     <div class="modal-body">
                        <h3><b>Load Core</b></h3>
                        <p>Load your core by clicking on the first tab. Scroll down until you reach the desired Core. We will use Nestopia for now. Don't forget - Content must be compatible with the matched Core.</p>
                        <ul>
                           <li>Nes: <i>NESTOPIA</i></li>
                           <li>Game Boy / Color: <i>Gambatte</i></li>
                        </ul>
                        <p>etc.</p>
                        <p></p>
                        <h3><b>Load Content</b></h3>
                        <p>After selecting Core, click Run. After RetroArch opens, click Add Content and select your compatible ROM.</p>
                        <ul>
                           <li>Nestopia > <i>YourGame.nes</i></li>
                           <li>Gambatte > <i>YourGame.gbc</i></li>
                        </ul>
                        <p>etc.</p>
                        <p></p>
                        <h3><b><span class="fa fa-trash-o"></span> Cleanup Storage</b></h3>
                        <p>The trashcan erases your existing configuration and presets. If the Web Player doesn't start, you should click the trashcan and refresh the cache in your browser (usually F5 or Shift+F5).</p>
                        <p></p>
                        <h3><b><span class="fa fa-bars"></span> Quick Menu</b></h3>
                        <p>If you click on the three line icons, the Quick Menu will open here as in RetroArch.</p>
                     </div>
                     <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!--/.navbar content-->
      </nav>
      <div class="bg-inverse webplayer-container">
         <div class="webplayer_border text-xs-center" id="canvas_div">
            <div class="showMenu">
               <button type="button" class="btn btn-link">
               <span class="fa fa-chevron-down" id="icnShowMenu"></span> <span class="sr-only">Show Top Navigation</span>
               </button>
            </div>
            <canvas class="webplayer" id="canvas" style="display: none"></canvas>
            <img class="webplayer-preview img-fluid" src="media/canvas.png" width="960" height="720" alt="RetroArch Logo">
         </div>
      </div>
      <script crossorigin="anonymous" src="//code.jquery.com/jquery-3.1.0.min.js"></script>
      <script crossorigin="anonymous" src="//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
      <script crossorigin="anonymous" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
      <script crossorigin="anonymous" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
      <script src="analytics.js"></script>
      <!--script src="//wzrd.in/standalone/browserfs@0.6.1"></script-->
      <script src="browserfs.min.js"></script>
      <script src="core_list.js"></script>
      <script src="libretro.js"></script>
   </body>
</html>
